<template>
	<view>
		<showNewData ref='chrild10' ></showNewData>
		<view class="top_bar" style="background: rgba(244,244,244,0.96); border-bottom:1rpx solid #b5b5b5;" >
			<view @click="backLogin" class="top_bar_left">
				<view class="text">取消</view>
			</view>
			<view class="top_bar_center">
				<text>创建群聊</text>
			</view>
			<view class="top_bar_right"></view>
		</view>
		<view class="main">
			<view class="top">
				<view class="group-img">
					<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
					<image mode="heightFix" :src="cropFilePath" @tap="upload"  ></image>
				</view>
				<view class="group-name">
					<input class="group-name-input" type="text" v-model='groupName' placeholder="为群取个名字吧" />
				</view>
				<view class="title">邀请好友</view>
			</view>
			
			<view class="friends">
				<view class="users" v-for='item,index in users' :key='index'>
					<view class="selected" @click="selected(index)">
						<image src="../../static/yes.png" mode="" v-if="item.selected"></image>
					</view>
					<view class="user-img">
						<image :src="item.userImg" mode=""></image>
					</view>
					<view class="name">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="but">
				<view @click='onBuildGroup' class="buts" :class="{notsubmits:notsubmit}">
					创建群聊({{addnum}})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import ImageCropper from "../../components/ling-imgcropper/ling-imgcropper.vue";
	import datas from '../../commons/js/data.js'
	import request,{BasicUrl} from '../../utails/request.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				defaultImg:'http://120.24.182.152:5555/s/static/s/image_files/users_image/user666.png',
				// 上传后的图片
				cropFilePath:'../../static/image/index/userss.png',
				// 图片
				tempFilePath: "",
				groupName:'', // 群名
				notsubmit:true, // 不允许提交
				addnum:0,// 选中个数
				users:[
					{id:0,name:'',userImg:'',selected:false}
				],// 好友数组
				addUsers:[] // 选中好友
			}
		},
		// 引入裁剪工具
		components: {
		    ImageCropper,
			showNewData
		  },
		onLoad() {
			this.getViewData()
		},
		methods: {
			// 接socket提醒
			getSocketData(){
				this.socket.emit('login',this.userinfo.id)
				this.socket.on('shows',(data)=>{
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs.chrild10
					setTimeout(()=>{
						ch.handleShow(datas)
					},300)
				})
			},
			
			// 点击选中
			selected(e){
				this.users[e].selected = !this.users[e].selected
				// 计算选中个数
				this.addnum = 0
				this.users.forEach(v=>{
					if(v.selected){
						this.addnum++
					}
				})
				if(this.addnum!=0 && this.groupName.length>0){
					this.notsubmit = false
				}else{
					this.notsubmit = true
				}
			},
			// 获取页面数据
			async getViewData(){
				this.userinfo = uni.getStorageSync('userinfo')
				
			    let res = await request.request({url:'/groupbuild/',data:{userid:this.userinfo.id}})
				// 
				this.users = [...this.users,...res]
				// 处理
				this.users.forEach(v=>{
					v.selected = eval(v.selected)
				})
				this.getSocketData()
			},
			
			// 点击创建
			async onBuildGroup(){
				if(!this.notsubmit){
					let adduser = []
					this.users.forEach(v=>{
						if(v.selected){
							adduser.push(v.id)
						}
					})
					// 群主也是成员
					adduser.push(this.userinfo.id)
					let data = {
						userid:this.userinfo.id,
						users:adduser,
						groupname:this.groupName
					}
					let res = await request.request({url:'/groupbuild/',data,method:'POST'})
					if(res.code=='200'){
						uni.uploadFile({
								url: `${BasicUrl}/groupimg/`,
								filePath: this.cropFilePath,
								name: "file",
								fileType: "image",
								formData:{
									userid:this.userinfo.id,
									groupname:this.groupName
								},
								success: (uploadFileRes) => {
								  var backstr = uploadFileRes.data;
								  if(backstr.code=='200'){
									  uni.showToast({
									  	title:'创建成功'
									  })
								  }else{
									  uni.showToast({
									  	title:'由于网络问题 头像上传失败 请后续上传头像',
										icon:'none'
									  })
								  }
								  uni.navigateBack({
								  	delta:1
								  })
								}
						});
					}else{
						uni.showToast({
							title:'创建失败',
							icon:'error'
						})
					}
				}else{
					console.log('no')
				}
				
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
		// 头像裁剪上传
		  upload() {
			  uni.chooseImage({
				count: 1, //默认9
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album"], //从相册选择
				success: (res) => {
				  this.tempFilePath = res.tempFilePaths.shift();
				},
			  });
			},
			confirm(e) {
			  this.tempFilePath = "";
			  this.cropFilePath = e.detail.tempFilePath;
		
			  // #ifdef APP-PLUS||MP
			  //除了H5端返回base64数据外，其他端都是返回临时地址，所以你要判断base64还是临时文件名，（用条件编译APP-PLUS||MP执行编译。）
			  //按我这里是先上传裁剪得来的临时文件地址然后得到临时文件名，
			  //待活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了
		
			  // #endif
			},
			cancel() {
			  console.log("canceled");
			  this.tempFilePath = "";
			}
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	.main{
		display: flex;
		flex-direction: column;	
	}
	.main .top{
		width: 100%;
		padding-top: 118rpx;
		text-align: center;
		position:fixed;
		z-index: 90;
		background-color: white;
	}
	.main .top .group-img{
		position: relative;
	}
	.main .top .group-img image{
		width: 196rpx;
		height: 196rpx;
		/* background-color:#f4ea2a; ; */
		box-shadow: 0px 20rpx 30rpx 0px rgba(39,40,50,0.1);
	}
	
	.group-name{
		padding: 62rpx 62rpx 20rpx 62rpx ;
	}
	.group-name-input{
		height: 92rpx;
		background-color:#e6e6e5 ;
		border-radius: 46rpx;
		text-align: center;
		font-size: 32rpx;
		color: #555555;
	}
	
	.friends{
		margin-top:500rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		z-index: 10;
	}
	.title{
		text-align: left;
		font-size: 40rpx;
		padding: 30rpx 40rpx;
		margin-left: 40rpx;
		
	}
	.friends .users{
		font: 1;
		margin: 8rpx 0;
		
	}
	.friends .users .selected{
		float: left;
		margin: 15rpx;
		margin-left: 85rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(255,228,49,0.5);
		border-radius: 20rpx;
	
	}
	.friends .users .selected image{
		width: 60rpx;
		height: 60rpx;
	}
	.friends .users .user-img{
		float: left;
		height: 90rpx;
	}
	.friends .users .user-img image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
	}
	.friends .users .name{
		float: left;
		margin-left: 20rpx;
		font-size: 30rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	/* but */
	 .but{
		/* 安全距离 */
		padding-bottom: var(--status-bar-height);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color:rgba(244,244,244,0.96);
		z-index: 90;
	}
	 .but .buts{
		margin-left: 10%;
		margin-top: 7rpx;
		width: 80%;
		height: 90rpx;
		background-color:#f4ea2a ;
		text-align: center;
		color: white;
		font-size: 40rpx;
		line-height: 90rpx;
		/* z-index: 90; */
	}
	.but .notsubmits{
		background-color: #dedede;
	}
</style>
